<template>
	<view class="RealNameAuthentication">
		<view class="RealNameAuthenticationHead">
			应监管要求，请上传证件上传
			<text style="float: right;font-size: 26rpx;font-weight: bold;">X</text>
		</view>
		<view class="RealNameAuthenticationOperation">
			<view class="RealNameAuthenticationOperationName">
				{{realname}}（{{id_card}}）
			</view>
			<view class="RealNameAuthenticationOperationImg">
				<div :style="national == '' ? 'display: inline-block;':'display:none;'" class="RealNameAuthenticationOperationImgZM" @click="chooseImage(1)">
					<text class="RealNameAuthenticationOperationImgText">拍摄头像面</text>
				</div>
				<image :style="national == '' ? 'display:none;':'display:inline-block;'" class="imageZM" :src="national"></image>
				<div :style="positive == '' ? 'display:inline-block;':'display:none;'" class="RealNameAuthenticationOperationImgGH" @click="chooseImage(2)">
					<text class="RealNameAuthenticationOperationImgText">拍摄国徽面</text>
				</div>
				<image :style="positive == '' ? 'display:none;':'display:inline-block;'" class="imageGH" :src="positive"></image>
			</view>
			<view class="RealNameAuthenticationTips">
				注意拍摄事项
			</view>
			<view class="">
				<view class="RealNameAuthenticationTipsImg">
					<image src="../../static/yq1.png" style="width: 154rpx;height: 112rpx;" mode=""></image>
					<text>标准</text>
				</view>
				<view class="RealNameAuthenticationTipsImg">
					<image src="../../static/yq2.png" style="width: 154rpx;height: 112rpx;" mode=""></image>
					<text>标准</text>
				</view>
				<view class="RealNameAuthenticationTipsImg">
					<image src="../../static/yq3.png" style="width: 154rpx;height: 112rpx;" mode=""></image>
					<text>标准</text>
				</view>
				<view class="RealNameAuthenticationTipsImg">
					<image src="../../static/yq4.png" style="width: 154rpx;height: 112rpx;" mode=""></image>
					<text>标准</text>
				</view>
			</view>
		</view>
		<view class="RealNameAuthenticationBottom">
			<view class="RealNameAuthenticationBottomInput" @click="realNameSubmit">
				提交
			</view>
			<view>
				信息仅用做审批借款额度，将加密保障您的信息安全
			</view>
		</view>
	</view>
</template>

<script>
	import {VUE_API_URL} from "@/components/pulugins/index";
	import {VUE_API_URL_IMG} from "@/components/pulugins/index"
	export default {
		data() {
			return {
				national:'',			//正面
				positive:'',			//反面
				nationalImg:'',
				positiveImg:'',
				positive2:'',
				national2:'',
				realname:'',			//名字
				id_card:'',				//ID
			}
		},
		onShow() {
			// this.PrcductRecommend();
		},
		onLoad() {
			var that = this;
			that.token = uni.getStorageSync('token');
		},
		mounted() {
			this.premise();
		},
		methods: {
			premise(){
				var that = this;
				uni.request({						//用户所有信息
				    url: VUE_API_URL + '/user/info', 
					method:'POST',
				    data: {},
				    header: {
				        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res);
						let data = res.data.data;
						this.id_card = data.id_card.replace(/(\w{8})\w*(\w{2})/, '$1******$2')
						var realname=data.realname.split('');
						for(var i=0;i<realname.length;i++){
							if(i!=0){
								realname[i] = '*';
								that.realname += realname[i]
							}else{
								that.realname += realname[i]
							}
						}
						
				    }
				});	
				
			},
			chooseImage(index){
				var that = this; 
				if(index == 1){
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							uni.uploadFile({
							    url: VUE_API_URL + 'uploadfile', //仅为示例，非真实的接口地址
							    filePath: tempFilePaths,
							    name: 'file',
							    formData: {
							       // type:'national'
							    },
								header: {
								    'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
								}, 
							    success: (res) => {
									var json = eval('(' + res.data + ')');
									that.national2 = json.data.filename;
									that.national = VUE_API_URL_IMG + json.data.filename;
									that.nationalImg = json.data.filename;
									console.log(json);
							    }
							});
							}
						});
					}else{
						uni.chooseImage({
							success: (chooseImageRes) => {
								const tempFilePaths = chooseImageRes.tempFilePaths[0];
								uni.uploadFile({
								    url: VUE_API_URL + 'uploadfile', //仅为示例，非真实的接口地址
								    filePath: tempFilePaths,
								    name: 'file',
								    formData: {
								        // type:'positive'
								    }, 
									header: {
									    'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
									}, 
								    success: (res) => {
										console.log(res)
										var json = eval('(' + res.data + ')');
										that.positive2 = json.data.filename;
										that.positive = VUE_API_URL_IMG + json.data.filename;
										that.positiveImg = json.data.filename;
										console.log(json.data.filename);
								    }
								});
								}
							});
					}
			},
			realNameSubmit:function(){
				var that = this;
				
				uni.request({
				    url: VUE_API_URL + 'user/submit', 
					method:'POST',
				    data: {
				        type:1,
						card_portrait:that.national2,		//身份证人面像
						card_national:that.positive2,		//身份证反面
				    },
				    header: {
				        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res);
						uni.showToast({
						    title: res.data.msg,
							icon:'none',
						    duration: 2000
						});
				    }
				});	 
			}
			
		},
	}
</script>

<style>
	.imageZM{
		width: 302rpx;
		height: 228rpx;
		margin-right: 36rpx;
		position: relative;
		top: -5px;
	}
	.imageGH{
		width: 302rpx;
		height: 228rpx;
		position: relative;
		top: -5px;
	}
	.RealNameAuthenticationBottomInput{
		margin: auto;
		width: 650rpx;
		height: 95rpx;
		background: linear-gradient(-84deg, #DFBA94, #DFAE7C);
		box-shadow: 1px 3rpx 10rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 48rpx;
		text-align: center;
		line-height: 95rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.RealNameAuthenticationBottom{
		width: 100%;
		margin-top: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		text-align: center;
	}
	.RealNameAuthenticationTipsImg{
		display: inline-block;
		width: 25%;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #929292;
		text-align: center;
		margin-top: 48rpx;
	}
	.RealNameAuthenticationTips{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
		margin-top: 46rpx;
	}
	.RealNameAuthenticationOperationImgText{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
		position: absolute;
		bottom: 30rpx;
		left: 100rpx;
	}
	.RealNameAuthenticationOperationImgGH{
		background-image: url(../../static/sfzgh.png);
		background-size: 100%;
		width: 315rpx;
		height: 238rpx;
		position: relative;
		display: inline-block;
	}
	.RealNameAuthenticationOperationImgZM{
		background-image: url(../../static/sfzzm.png);
		background-size: 100%;
		width: 315rpx;
		height: 238rpx;
		position: relative;
		display: inline-block;
		margin-right: 38rpx;
	}
	.RealNameAuthenticationOperationImg{
		margin-top: 40rpx;
	}
	.RealNameAuthenticationOperationName{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
	}
	.RealNameAuthenticationOperation{
		background: #FFFFFF;
		width: 100%;
		padding: 35rpx 41rpx;
		box-sizing: border-box;
	}
	.RealNameAuthenticationHead{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		background: #FBE5CE;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #DFAF80;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	page{
		background: #F8F8F8;
	}
</style>
